@inherits AppPageBase

@if (isOpen)
{
    <NavigationLock OnBeforeInternalNavigation="OnNavigation" />
}

<BitModal @bind-IsOpen="isOpen"
          AutoToggleScroll="false" Blocking="isChanged"
          Draggable DragElementSelector=".header-stack">
    <section>
        <BitStack Class="stack">
            <BitStack VerticalAlign="BitAlignment.Center" Class="header-stack" Horizontal>
                <BitText Typography="BitTypography.H5">
                    @if (category.Id == default)
                    {
                        @Localizer[nameof(AppStrings.AddCategory)]
                    }
                    else
                    {
                        @Localizer[nameof(AppStrings.EditCategory)]
                    }
                </BitText>
                <BitSpacer />
                <BitButton IconOnly FixedColor
                           Variant="BitVariant.Text"
                           IconName="@BitIconName.Cancel"
                           Color="BitColor.SecondaryBackground"
                           OnClick="() => isOpen = false" />
            </BitStack>
            <BitCard FullSize>
                <EditForm @ref="editForm" Model="category" OnValidSubmit="WrapHandled(Save)" novalidate>
                    <AppDataAnnotationsValidator @ref="validatorRef" />

                    <BitStack Gap="0.25rem">
                        <BitTextField @bind-Value="category.Name"
                                      Label="@Localizer[nameof(AppStrings.Name)]"
                                      Placeholder="@Localizer[nameof(AppStrings.EnterCategoryName)]" />
                        <ValidationMessage For="() => category.Name" />
                        <br />
                        <BitLabel For="catColorInput">@Localizer[nameof(AppStrings.Color)]</BitLabel>

                        <BitStack>
                            <BitStack Horizontal>
                                @foreach (var color in new[] { "#FFCD56", "#FF6384", "#4BC0C0", "#FF9124", "#2B88D8", "#C7E0F4" })
                                {
                                    <button @onclick="() => SetCategoryColor(color)"
                                            type="button"
                                            style="background-color: @color"
                                            class="color-btn @(category.Color == color ? "color-btn--active" : null)" />
                                }
                            </BitStack>

                            <BitStack Horizontal>
                                <div class="color-square selected" style="background-color: @category.Color"></div>
                                <BitToggleButton @bind-IsChecked="isColorPickerOpen" Variant="BitVariant.Outline">
                                    @Localizer[(nameof(AppStrings.CustomColor))]
                                </BitToggleButton>
                            </BitStack>

                            @if (isColorPickerOpen)
                            {
                                <div class="color-picker-container">
                                    <BitColorPicker @bind-Color="category.Color" Id="catColorInput" ShowPreview="true">
                                        @Localizer[nameof(AppStrings.DefaultColorPicker)]
                                    </BitColorPicker>
                                </div>
                            }
                        </BitStack>
                        <ValidationMessage For="() => category.Color" />
                        <br />
                        <BitStack Horizontal>
                            <BitButton ButtonType="BitButtonType.Button" OnClick="(() => isOpen = false)" Variant="BitVariant.Outline">
                                @Localizer[nameof(AppStrings.Cancel)]
                            </BitButton>

                            <BitButton IsLoading=isSaving ButtonType="BitButtonType.Submit">
                                @Localizer[nameof(AppStrings.Save)]
                            </BitButton>
                        </BitStack>
                    </BitStack>
                </EditForm>
            </BitCard>
        </BitStack>
    </section>
</BitModal>
